<script setup>
import { computed, onMounted, ref, watch } from "vue";
import { useRouter } from "vue-router";
import { getProjectByKw } from "@/api/innovation";
import { SUCCESS } from "@/core/constants/HttpStatus";
import { ElMessage } from "element-plus";

const router = useRouter();

const projectList = ref([]); //比赛列表
const currentPage = ref(1); //当前页数
const convertedTotal = ref(); //比赛总数
const loading = ref(false);

// 跳转至项目详情页面
// TODO: 考虑剥离
const goToDetails = (ppName) => {
  const query = { ppName: ppName };
  router.push({ path: "/innovation/detail", query });
};

// 翻页
const handlePageChange = async () => {
  try {
    loading.value = true;
    const res = await getProjectByKw({
      type: "类别",
      kw: "专业类",
      current: currentPage.value,
      size: 6,
    });

    const { code, data, msg } = res.data;
    if (code == SUCCESS) {
      projectList.value = data.records;
      convertedTotal.value = Number(data.total);
    } else {
      throw new Error("数据加载失败");
    }
    loading.value = false;
  } catch (error) {
    ElMessage.error(error.message || "数据加载失败");
  }
};

// 获取专业类别项目数据
const fetchSpecialityData = async () => {
  try {
    loading.value = true;
    const res = await getProjectByKw({
      type: "类别",
      kw: "专业类",
      current: 1,
      size: 6,
    });
    console.log(res);
    const { code, data, msg } = res.data;
    if (code == SUCCESS) {
      projectList.value = data.records;
      convertedTotal.value = Number(data.total);
    } else {
      throw new Error("数据加载失败");
    }
    loading.value = false;
  } catch (error) {
    ElMessage.error(error.message || "数据加载失败");
  }
};

watch(currentPage, (newValue, oldValue) => {
  if (newValue !== oldValue) {
    handlePageChange();
  }
});

onMounted(() => {
  fetchSpecialityData();
});
</script>
<template>
  <div class="professionalBox">
    <div v-loading="loading" style="min-height: 300px">
      <div class="Items">
        <div class="ItemsBox">
          <div
            class="allItem"
            v-for="(item, index) in projectList"
            :key="index"
            @click="goToDetails(item.ppName)"
          >
            <div class="alltitle">
              <i class="iconfont icon-jiangbei1"></i>
              <span>{{ item.ppName }}</span>
            </div>
            <span class="suitable" v-if="item.ppSuitableStudent"
              >本系适合对象:{{ item.ppSuitableStudent }}</span
            >
            <div class="hotStar">
              <i
                class="iconfont icon-shoucang"
                v-for="n in parseInt(item.ppPopularity)"
                :key="n"
              ></i>
            </div>
          </div>
        </div>
      </div>
      <el-pagination
        v-if="projectList.length"
        :page-size="6"
        layout="prev, pager, next"
        :total="convertedTotal"
        v-model:current-page="currentPage"
        class="page"
      >
      </el-pagination>
    </div>
  </div>
</template>
<style scoped lang="less">
.professionalBox {
  width: 1000px;
}

/* 比赛项目卡片 */

.Items {
  margin-top: 2%;
  display: flex;
  justify-content: center;
  .ItemsBox {
    width: 1000px;
    display: flex;
    flex-wrap: wrap;
  }
}

.allItem {
  width: 300px;
  height: 170px;
  box-shadow: 2px 2px 10px rgb(199, 198, 198);
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-right: 30px;
  margin-bottom: 30px;
  position: relative;
}

.alltitle {
  padding: 0px 16px;
  display: flex;
  flex-direction: row;
  position: absolute;
  top: 15%;
}

.alltitle span {
  height: auto;
  font-size: 20px;
  font-weight: bold;
  line-height: 30px;
}

.allItem .hotStar {
  position: absolute;
  bottom: 10%;
}

.allItem .hotStar i {
  color: rgb(246, 246, 23);
  font-size: 20px;
}

.allItem i {
  color: #1e9ab5;
  font-size: 24px;
  margin-right: 2px;
  margin-top: 2px;
}

.suitable {
  font-size: 16px;
  font-weight: bold;
  line-height: 45px;
  position: relative;
  top: 50%;
}

.page {
  justify-content: center;
}
</style>
